﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowMap.aspx.cs" Inherits="WebApplication1.NewFolder1.ShowMap" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>

    <script src="../src/jslib/jQuery/jquery-1.3.js" type="text/javascript"></script>

    <link rel="stylesheet" href="../src/css/SystemCss.css" type="text/css" />
    <link rel="stylesheet" href="../src/css/ToolbarCss.css" type="text/css" />
    <link rel="stylesheet" href="../src/css/WebMain.css" type="text/css" />
    <link rel="stylesheet" href="../src/css/WebResearch.css" type="text/css" />
    <link href="../src/css/MapCSS.css" rel="stylesheet" type="text/css" />
    <link href="../src/css/TableCss.css" rel="stylesheet" type="text/css" />

    <script src="../src/js/jquery.GoogleMap.js" type="text/javascript"></script>

    <script charset="utf-8" src="http://ditu.google.cn/maps?file=api&amp;v=3&amp;key&sensor=false&hl=zh-CN" type="text/javascript"></script>

    <script type="text/javascript">
        jQuery().ready(function () {
            //==========拉长左边表格的宽度，收缩查询区域==============
            jQuery('#hiddenresearch').click(function () {
                jQuery('#researchframe').toggle(500);
                jQuery('#researcharea').toggle(500);
                jQuery('#researchbutton').toggle(500);
                jQuery('#terminalbutton').toggle(500);

                jQuery('#listframe').animate({ width: '+117%' }, 500); //css('width','920');   
            });

            //==========缩短左边表格的宽度，伸展查询区域==============
            jQuery('#researchbutton').click(function () {
                jQuery('#researchframe').toggle(500);
                jQuery('#researcharea').toggle(500);
                jQuery('#researchbutton').toggle(500);
                jQuery('#terminalbutton').toggle(500);

                jQuery('#listframe').animate({ width: '100%' }, 200); //css('width','710');   
            });

            //==========拉长左边表格的宽度，收缩树状关系图区域========
            jQuery('#hiddenterminal').click(function () {
                jQuery('#terminalarea').toggle(500);
                jQuery('#researcharea').toggle(500);
                jQuery('#researchbutton').toggle(500);
                jQuery('#terminalbutton').toggle(500);

                jQuery('#listframe').animate({ width: '+117%' }, 500); //css('width','920');   
            });

            //==========缩短左边表格的宽度，伸展树状关系图区域========
            jQuery('#terminalbutton').click(function () {
                jQuery('#terminalarea').toggle(500);
                jQuery('#researcharea').toggle(500);
                jQuery('#researchbutton').toggle(500);
                jQuery('#terminalbutton').toggle(500);

                jQuery('#listframe').animate({ width: '100%' }, 200); //css('width','710');                
            });

            //==========定义表格行的背景色===========================
            jQuery("table[class='listform'] tr:odd").addClass('listtrone');
            jQuery("table[class='listform'] tr:even").addClass('listtrtwo');

            //==========选中行===========================
            jQuery("table[class='listform'] tr").hover(function () {
                jQuery(this).addClass('listtrover');
            }, function () {
                jQuery(this).removeClass('listtrover');
            });

        });
     
    </script>

    <script type="text/javascript">
        //地图对象
        var Map;

        //已有的地标
        //var location = { x: 39.919, y: 116.387 };

        //设置起始坐标（默认北京）
        var latlng = new GLatLng(23.132, 113.307);

        //默认地图缩放级别
        var zoomSize_Default = 11;

        //焦点地图缩放级别
        var zoomSize = 15;

        //新地标
        var newMarker;

        //新增标志位
        var addFlag = false;

        //定义蓝色Icon样式
        var blueIcon = new GIcon(G_DEFAULT_ICON, "../src/images/gmap_blue.png");

        //定义绿色Icon样式
        var greenIcon = new GIcon(G_DEFAULT_ICON, "../src/images/gmap_green.png");

        //定义紫色Icon样式
        var purpleIcon = new GIcon(G_DEFAULT_ICON, "../src/images/gmap_purple.png");

        //定义黄色Icon样式
        var yellowIcon = new GIcon(G_DEFAULT_ICON, "../src/images/gmap_yellow.png");

        //默认样式
        var option_Default = { icon: G_DEFAULT_ICON };

        //蓝色地标样式
        var option_BlueICON = { icon: blueIcon, draggable: true };

        //绿色样式
        var option_Green = { icon: greenIcon };

        //紫色样式
        var option_Purple = { icon: purpleIcon };

        //黄色样式
        var option_Yellow = { icon: yellowIcon };

        //数据
        var TerminalsHash = new Array();


        //页面载入
        jQuery().ready(function () {
            $('[id$=ddlArea]').change(function () {
                switch ($('[id$=ddlArea]').val()) {
                    case "010":
                        //北京
                        latlng = new GLatLng(39.919, 116.387);
                        break;
                    case "021":
                        //上海
                        latlng = new GLatLng(31.233, 121.482);
                        break;
                    case "020":
                        //广州
                        latlng = new GLatLng(23.132, 113.307);
                        break;
                    case "023":
                        //重庆
                        latlng = new GLatLng(29.564947, 106.551762);
                        break;
                }

                Map.panTo(latlng);
                Map.setZoom(11);
                ShowData();
            });

            jQuery('#divLoading').hide();
            $.getJSON("MapHander.ashx", { saction: "show", skey: 123 }, function (resultData) {
            debugger
                latlng = new GLatLng(resultData.x, resultData.y);
                Map = GoogleMapCreate(document.getElementById("panelterminalmap"), true, true, true, true, zoomSize_Default, latlng);

                ShowData();
            });
            //加载地图
            

            //            window.setInterval(function() {
            //                ShowData();
            //            }, 60000);

            $('#research').click(function () {
                ShowData();
            });
        });

        function ShowData() {

            //$('#divLoading').show();

//            var sProvinceCode = jQuery('[id$=ddlProvince]').val();
//            var sCityCode = jQuery('[id$=ddlCity]').val();
//            var sDistrictCode = jQuery('[id$=ddlDistrict]').val();
//            var sAreaCode = jQuery('[id$=ddlArea]').val();
//            var sORGID = jQuery('[id$=ddlOrg]').val();
//            var sChannelID = jQuery('[id$=ddlChannel]').val();
//            var sNodeID = jQuery('[id$=ddlNode]').val();
//            var NetWork = jQuery('[id$=ddlNetWork]').val();
//            var TerminalState = jQuery('[id$=ddlTerminalState]').val();
//            var sNetState = jQuery('[id$=ddlNetState]').val();
//            var scrennState = jQuery('[id$=ddlScreenState]').val();
//            var fileState = jQuery('[id$=ddlFileState]').val();
//            var KeyWord = jQuery('[id$=ddlKeyWord]').val();
//            var sContent = jQuery('[id$=txtContent]').val();


          
            jQuery('#divLoading').show();
            $.getJSON("MapHander.ashx", { saction: "show", skey: 123 }, function (resultData) {
                cb_LoadData(resultData)
            });
        }

        var Terminals;
        var list = [];
        var i;
        var n = 16;

        //回调函数
        function cb_LoadData(resultData) {
            //alert(resultData.json);
            debugger
            if (resultData == null || resultData == '') {
                $('.terminalinfolist .selectform').empty();
                Map.clearOverlays();
                $('#divLoading').hide();
                return;
            }
            list[0] = resultData;
            Terminals = list;

            jQuery('#td_count').text('共 ' + Terminals.length + ' 条记录');

            //alert(Terminals);
            Map.clearOverlays();
            i = 0;

            $('.terminalinfolist .selectform').empty();
            //$('.terminalinfolist .selectform').append("<tr><td>终端MAC</td><td>安装地址</td></tr>");
            //var trHTML = new Array();

            CreateMarker();

            //$('.terminalinfolist .selectform').append(trHTML.join(''));

            //$('#divLoading').hide();
        }



        function CreateMarker() {
            if (i < Terminals.length) {

                if (Terminals[i] != undefined) {
                    if (true) {
                        //var point = eval('(' + Terminals[i].sPoint + ')');
                        var latlng = new GLatLng(Terminals[i].x, Terminals[i].y);
                        var sName = Terminals[i].Name;
                        var strhtml = CreateHTML(Terminals[i]);
                        //                        alert(option_Yellow);
                        SetMapArea(latlng, sName, strhtml, option_Green);

                        TerminalsHash[Terminals[i].sMAC] = Terminals[i];

                        var trHTML = ("<tr><td><a href='#' onclick=selectMarker('" + Terminals[i].sid + "');>" + Terminals[i].Name + "</a></td><td>" + Terminals[i].Address + "</td></tr>");
                        $('.terminalinfolist .selectform').append(trHTML);

                    }
                    i++;

                }
                window.status = i;
                setTimeout(CreateMarker, n);
            }
            else {
                $('#divLoading').hide();
            }

        }


        //设置标记及单击事件
        function SetMapArea(latlng, sName, strhtml, option) {
            var marker = GoogleMapNewMarker(Map, latlng, option);

            //地标drag事件
            GEvent.addListener(marker, "mouseover", function () {
                GoogleMapShowTipExpand(Map, latlng, sName, strhtml);
            });
        }

        //选择地标
        function selectMarker(sKey) {
            var oTerminal = TerminalsHash[sKey];
            var oPoint = eval('(' + oTerminal.sPoint + ')');
            var point = new GLatLng(oPoint.x, oPoint.y);

            var sName = oTerminal.sMAC;
            var strhtml = CreateHTML(oTerminal);

            if (Map.getZoom() < zoomSize)
                Map.setZoom(zoomSize);

            Map.panTo(point);

            GoogleMapShowTipExpand(Map, point, sName, strhtml);

        };

        function CreateHTML(obj) {
            var HTML = new Array();
            HTML.push("<table width='100%'>");

            HTML.push("<tr>");
            HTML.push("<td>名称：</td>");
            HTML.push("<td>");
            HTML.push(obj.sTerminalCode);
            HTML.push("</td>");
            HTML.push("<td>地址：</td>");
            HTML.push("<td>");
            HTML.push(obj.sChannelName);
            HTML.push("</td>");
            HTML.push("</tr>");

            HTML.push("<tr>");
            HTML.push("<td>电话：</td>");
            HTML.push("<td colspan='3'>");
            HTML.push(obj.sAddress);
            HTML.push("</td>");
            HTML.push("</tr>");

            HTML.push("<tr>");
            HTML.push("<td>手机：</td>");
            HTML.push("<td>");
            HTML.push(obj.sMaintainName);
            HTML.push("</td>");
            HTML.push("<td>联系人：</td>");
            HTML.push("<td>");
            HTML.push(obj.sMaintainTel);
            HTML.push("</td>");
            HTML.push("</tr>");

            HTML.push("<tr>");
            HTML.push("<td>邮箱：</td>");
            HTML.push("<td>");
            HTML.push(obj.sMAC);
            HTML.push("</td>");
            HTML.push("<td></td>");
            HTML.push("<td>");
            HTML.push(obj.sIP);
            HTML.push("</td>");
            HTML.push("</tr>");

            //            HTML.push("<tr>");
            //            HTML.push("<td>在线状态</td>");
            //            HTML.push("<td colspan='3'><img id='img1' src='../Public/Images/");
            //            HTML.push(obj.sTerminalState);
            //            HTML.push(".gif' /></td>");
            //            HTML.push("</tr>");

            //            HTML.push("<tr>");
            //            HTML.push("<td>屏幕状态</td>");
            //            HTML.push("<td colspan='3'><img id='img2' src='../Public/Images/sf");
            //            HTML.push(obj.sScreenState);
            //            HTML.push(".gif' /></td>");
            //            HTML.push("</tr>");

            //            HTML.push("<tr>");
            //            HTML.push("<td>文件报警</td>");
            //            HTML.push("<td colspan='3'><img id='img3' src='../Public/Images/sf");
            //            HTML.push(obj.sRSAState);
            //            HTML.push(".gif' />报警文件名：");
            //            HTML.push(obj.sRSAErrFile);
            //            HTML.push("</td>");
            //            HTML.push("</tr>");

            HTML.push("</table>");

            return HTML.join('');
        }


        window.onerror = function () {
            return true;
        };
        
    </script>

    <style type="text/css">
        /*--查询区域框，先行隐藏--*/#researchframe
        {
            display: none;
        }
        /*--终端信息区域，先显示--*/#terminalarea
        {
            display: block;
        }
    </style>
</head>
<body>
    <form id="Form1" runat="server">
    <div id="mainframe">
        <div id="listframe">
            <div id="innerLeft">
                <div id="menutitle">
                    <div id="menutitleleft">
                    </div>
                    <div id="menutitleright">
                    </div>
                    <div id="menutitlemid">
                        <div id="menutitlename">
                            终端地图标记管理</div>
                        <div id="divLoading" style="background-color: red; color: Black; position: fixed;
                            top: 0px; left: 300px; width: 100px;">
                            <img src="../src/images/loading.gif" alt="loading" />加载中……</div>
                    </div>
                </div>
                <div id="listarea">
                    <div id="mapextentarea">
                        <div id="panelterminalmap" style="width: 100%; height: 390px; float: right; top: 0px;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="researchframe">
            <div id="researchtitle">
                <div class="researchtitleleft">
                </div>
                <div class="researchtitlemid">
                    <div class="researchtitlename">
                        查询</div>
                    <div class="researchtitlesign">
                        <span id="hiddenresearch">
                            <img src="../src/images/tri.gif" /></span>
                    </div>
                </div>
                <div class="researchtitleright">
                </div>
            </div>
            <div class="researchcontent">
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <table cellpadding="0" cellspacing="1" id="researchtable">
                    <tr>
                        <th width="30%">
                            省：
                        </th>
                        <td width="70%">
                            <asp:DropDownList ID="ddlProvince" runat="server" AutoPostBack="True" OnTextChanged="ddlProvince_TextChanged"
                                Style="width: 90%">
                            </asp:DropDownList>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            市：
                        </th>
                        <td>
                            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                                <ContentTemplate>
                                    <asp:DropDownList ID="ddlCity" runat="server" AutoPostBack="True" OnTextChanged="ddlCity_TextChanged"
                                        Style="width: 90%">
                                    </asp:DropDownList>
                                </ContentTemplate>
                                <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID="ddlProvince" EventName="TextChanged" />
                                </Triggers>
                            </asp:UpdatePanel>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            区：
                        </th>
                        <td>
                            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                                <ContentTemplate>
                                    <asp:DropDownList ID="ddlDistrict" runat="server" Style="width: 90%" AutoPostBack="true">
                                    </asp:DropDownList>
                                </ContentTemplate>
                                <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID="ddlProvince" EventName="TextChanged" />
                                    <asp:AsyncPostBackTrigger ControlID="ddlCity" EventName="TextChanged" />
                                </Triggers>
                            </asp:UpdatePanel>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            区域：
                        </th>
                        <td>
                            <asp:DropDownList ID="ddlArea" runat="server" AutoPostBack="True" OnTextChanged="ddlArea_TextChanged"
                                Style="width: 90%">
                            </asp:DropDownList>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            机构：
                        </th>
                        <td>
                            <asp:UpdatePanel ID="UpdatePanel4" runat="server">
                                <ContentTemplate>
                                    <asp:DropDownList ID="ddlOrg" runat="server" AutoPostBack="True" OnTextChanged="ddlOrg_TextChanged"
                                        Style="width: 90%">
                                    </asp:DropDownList>
                                </ContentTemplate>
                                <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID="ddlArea" EventName="TextChanged" />
                                </Triggers>
                            </asp:UpdatePanel>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            &nbsp;
                        </th>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="researchalign">
                            <input id="research" type="button" value="搜索" class="button_sub" />
                        </td>
                    </tr>
                </table>
            </div>
            <div class="researchbottom">
            </div>
        </div>
        <div id="terminalarea">
            <div class="researchtitle">
                <div class="researchtitleleft">
                </div>
                <div class="researchtitlemid">
                    <div class="researchtitlename">
                        终端信息</div>
                    <div class="researchtitlesign">
                        <span id="hiddenterminal">
                            <img src="../src/images/tri.gif" /></span>
                    </div>
                </div>
                <div class="researchtitleright">
                </div>
            </div>
            <div class="researchcontent">
                <div class="terminaliconarea">
                </div>
                <div class="terminalinfolisttitle">
                    <table class="selectform">
                        <tr>
                            <th>
                                机构名称
                            </th>
                            <th>
                                地址
                            </th>
                        </tr>
                        <tr>
                        <td colspan="2" id="td_count"></td>
                        </tr>
                    </table>
                </div>
                <div class="terminalinfolist">
                    <table class="selectform">
                    </table>
                </div>
            </div>
            <div class="researchbottom">
            </div>
        </div>
        <div id="researcharea">
            <div id="researchbutton">
                <img src="../src/images/BIS_frame_03.jpg" alt="查询" />
            </div>
            <div id="terminalbutton">
                <img src="../src/images/mapedit.jpg" alt="终端信息" />
            </div>
        </div>
        
    </div>
    </form>
</body>
</html>